<template>
  <div class="firePanel">
    <div class="condition">
      <!-- 时间单选 -->
      <div class="singleCheck">
        <el-radio v-model="timeSelect" label="1">实时</el-radio>
        <el-radio v-model="timeSelect" label="12">12小时</el-radio>
        <el-radio v-model="timeSelect" label="24">24小时</el-radio>
        <el-radio v-model="timeSelect" label="-1">自定义</el-radio>
      </div>
      <!-- 时间选择器 -->
      <div class="datetime-picker" v-if="showDatePicker">
        <el-date-picker
          v-model="startTime"
          type="date"
          format="YYYY-MM-DD"
            value-format = "YYYY-MM-DD"
          @change="(e) => timePickerChange('start', e)"
          placeholder="开始时间"
        ></el-date-picker>
        <span class="line"></span>
        <el-date-picker
          v-model="endTime"
          type="date"
          @change="(e) => timePickerChange('end', e)"
          format="YYYY-MM-DD"
            value-format = "YYYY-MM-DD"
          placeholder="结束时间"
        ></el-date-picker>
      </div>
      <!-- 区划类型 -->
      <div class="second">
        <!-- <div class="area">
          <span>区划:</span>
          <el-select class="fireCondition" v-model="area" placeholder="请选择">
            <el-option
              v-for="item in areaOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
        <!-- <div class="type">
          <span>类型:</span>
          <el-select class="fireCondition" v-model="type" placeholder="请选择">
            <el-option
              v-for="item in typeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
      </div>
      <div class="third">
        <!-- <div class="strength">
          <span>强度:</span>
          <el-select
            class="fireCondition"
            v-model="strength"
            placeholder="请选择"
          >
            <el-option
              v-for="item in strengthOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search">
          <el-input
            class="searchInput"
            placeholder="请输入火点编号"
            v-model="fireCode"
          ></el-input>
        </div> -->
        <p class="dateBtn" @click="handleTimeSelect">查询</p>
      </div>
    </div>
    <div class="refresh" @click="refreshData()" title="刷新火点列表">
      <i class="el-icon-refresh-right"></i>
    </div>
    <ListPanel :fireAllInfo="fireAllInfo" @setFireId="setFireId"></ListPanel>
    <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :pager-count="5"
      layout="total, prev, pager, next"
      :total="total"
    ></el-pagination>
    <!-- <audio ref="audio" :src="audioUrl" :loop="true"></audio> -->
    <!-- <div
      class="cover"
      v-if="pictLoading"
      v-loading="pictLoading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      :element-loading-text="loadingText"
    ></div> -->
  </div>
</template>

<script>
import ListPanel from "./ListPanel.vue";
// import { mapGetters } from "vuex";
export default {
  name: "firePanel",
  data() {
    return {
      timeSelect: "1",
      area: "",
      areaOption: [
        { value: "", label: "全部" },
        { value: "海口市", label: "海口" },
        { value: "万宁市", label: "万宁" },
        { value: "陵水黎族自治县", label: "陵水" },
        { value: "乐东黎族自治县", label: "乐东" },
        { value: "五指山市", label: "五指山" },
        { value: "定安县", label: "定安" },
        { value: "琼中黎族苗族自治县", label: "琼中" },
        { value: "文昌市", label: "文昌" },
        { value: "三亚市", label: "三亚" },
        { value: "琼海市", label: "琼海" },
        { value: "屯昌县", label: "屯昌" },
        { value: "儋州市", label: "儋州" },
        { value: "白沙黎族自治县", label: "白沙" },
        { value: "昌江黎族自治县", label: "昌江" },
        { value: "澄迈县", label: "澄迈" },
        { value: "保亭黎族苗族自治县", label: "保亭" },
        { value: "东方市", label: "东方" },
        { value: "临高县", label: "临高" },
        { value: "三沙市", label: "三沙" },
      ],
      type: "",
      typeOption: [
        { value: "", label: "全部" },
        { value: "森林", label: "森林" },
        { value: "农田及自然植被", label: "农田及自然植被" },
        { value: "草地", label: "草地" },
        { value: "城市或荒漠", label: "城市或荒漠" },
        { value: "灌木", label: "灌木" },
      ],
      strength: "",
      strengthOption: [
        { value: "", label: "全部" },
        { value: "1", label: "1" },
        { value: "2", label: "2" },
        { value: "3", label: "3" },
        { value: "4", label: "4" },
        { value: "5", label: "5" },
        { value: "6", label: "6" },
        { value: "7", label: "7" },
        { value: "8", label: "8" },
        { value: "9", label: "9" },
        { value: "10", label: "10" },
      ],
      fireAllInfo: {},
      startTime: "",
      endTime: "",
      fireCode: "",
      showDatePicker: false,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      audioUrl: "img/test.wav", //报警提示音
      isPlay: false,
      pictLoading: true, //ws连接等待效果
      loadingText: "正在连接，请稍后...",
      reConnect: 0, //ws重连次数
    };
  },
  // computed: {
  //   ...mapGetters(["getSmallPanel"]),
  // },
  watch: {
    timeSelect(val) {
      if (val == -1) {
        // this.startTime = "2021-04-04 17:40:00";
        // this.endTime = "2021-04-04 18:50:00";
        this.showDatePicker = true;
      } else {
        this.startTime = "";
        this.endTime = "";
        this.showDatePicker = false;
        this.websocketsend();
      }
    },
  },
  components: {
    // Title,
    ListPanel,
    // FireDetail,
    // FireAnalyze,
  },
  mounted() {
    this.initWebSocket();
  },
  methods: {
    // 重置
    refreshData() {
      this.startTime = "";
      this.endTime = "";
      this.area = "";
      this.type = "";
      this.strength = "";
      this.fireCode = "";
      if (this.timeSelect === "1") {
        this.websocketsend();
      } else {
        this.timeSelect = "1";
      }
    },
    // 分页
    handleCurrentChange(data) {
      this.websocketsend(data);
    },
    // 设置时间选择器起止时间
    timePickerChange(type, data) {
      //this.compareTime();
    },
    // 比较时间前后
    compareTime() {
      let startTimeStamp = Cesium.C_dayjs(this.startTime).valueOf();
      let endTimeStamp = Cesium.C_dayjs(this.endTime).valueOf();
      if (startTimeStamp > endTimeStamp) {
        this.$message({ type: "error", message: "开始时间不能晚于结束时间" });
        return false;
      } else {
        return true;
      }
    },
    handleTimeSelect() {
      this.websocketsend();
    },
    // 初始化ws
    initWebSocket() {
      const wsuri = window.huoqingUrl;
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    // ws连接成功
    websocketonopen() {
      console.log("ws连接成功");
      this.websocketsend();
      this.pictLoading = false;
    },
    // ws失败重连
    websocketonerror() {
      if (this.reConnect < 3) {
        this.initWebSocket();
        this.loadingText = `正在尝试第${this.reConnect + 1}次重连`;
        this.reConnect++;
      } else {
        this.$message("数据实时获取失败");
        this.loadingText = "数据连接失败";
      }
    },
    // ws信息接收
    websocketonmessage(e) {
      // return;
      let data = JSON.parse(e.data);
      if (data.isPush && !this.isPlay) {
        // this.$refs.audio.play();
        this.isPlay = true;
        this.$alert("有新增火点，请刷新列表查看！", {
          confirmButtonText: "确定",
          callback: (action) => {
            // this.$refs.audio.pause();
            this.isPlay = false;
          },
        });
      } else if (data.isPush && this.isPlay) {
        console.log("持续报警");
      } else {
        // 替换
        this.total = data.total;
        this.fireAllInfo = data;
        this.$store.commit("changeSjzxLeftCurrentComponent","HistoryFireMonitorDetail")
        this.$store.commit("changeSjzxLeftHistoryFireTj",{
          hour: this.timeSelect,
          pageNum: 1,
          pageSize: this.pageSize,
          startTime: this.startTime+" 00:00:00",
          endTime: this.endTime+" 00:00:00",
          code: this.fireCode,
          type: this.type,
          intensityT: this.strength,
          region: this.area,
        })
      }
      // console.log(data)
    },
    // ws信息发送
    websocketsend(page = 1) {
      let start = this.timeSelect == -1 ? this.startTime+" 00:00:00" : this.startTime;
      let end = this.timeSelect == -1 ? this.endTime+" 00:00:00" : this.endTime;
      // console.log(this.startTime, this.endTime)
      // this.$store.commit("setSmallPanel", "");
      this.websock.send(
        JSON.stringify({
          hour: this.timeSelect,
          pageNum: page,
          pageSize: this.pageSize,
          startTime: start,
          endTime: end,
          code: this.fireCode,
          type: this.type,
          intensityT: this.strength,
          region: this.area,
        })
      );
    },
    // ws关闭连接
    websocketclose(e) {
      console.log("ws断开连接", e);
    },
    // 更新当前点击的
    setFireId(val){
      this.$emit('setFireId', val)
    },
  },
  beforeUnmount(){
      this.websock.close()
    this.websocketclose()
    
  },
};
</script>

<style lang="stylus">
.firePanel {
    .el-date-table td span{
        color:#000;
    }
  .singleCheck {
    // width: 90%;
    // display: flex;
    // justify-content: space-between;
    // margin: 0px 0;
    .el-radio {
      margin-right: unset;
      .el-radio__inner {
        background: rgba(0, 0, 0, 0);
        border: 1px solid #c3c3c3;
      }
      .el-radio__label {
        color: #ffffff;
        font-size: 13px;
      }
      .el-radio__input.is-checked .el-radio__inner {
        border-color: #17d0ff !important;
      }
      .el-radio__input.is-checked .el-radio__inner::after {
        background: #17d0ff !important;
      }
      .el-radio__input.is-disabled + span.el-radio__label {
        color: #c0c4cc !important;
        cursor: not-allowed;
      }
    }
  }
  .datetime-picker {
    width: 100%;
    display: flex;
    justify-content: space-between;
    //margin-bottom: 10px;
    .el-date-editor.el-input {
      width: 48%;
      .el-input__icon {
        line-height: 30px;
      }
      input {
        height: 30px;
      }
    }
  }
  .el-input input {
    // border: 1px solid #17d0ff;
    // border:1px solid rgba(23, 208, 255, .1);
    border: 1px solid rgba(23, 208, 255, 0.5);
    border-radius: 3px;
    background: rgba(7, 39, 66, 0.38);
  }
  .second,
  .third {
    margin-bottom: 10px;
    .el-input--suffix .el-input__inner {
      width: 120px;
      height: 30px;
      vertical-align: middle;
    }
    .el-input__icon {
      line-height: 30px;
    }
    .el-input input {
      width: 150px;
      height: 30px;
      vertical-align: middle;
    }
  }
  .third {
    .el-input--suffix .el-input__inner {
      width: 80px;
    }
  }
  .pagination {
    text-align: center;
    color: unset;
    button:disabled {
      background-color: unset;
    }
    span {
      color: #fff;
    }
    .btn-next,
    .btn-prev {
      background: unset;
      color: #fff;
    }
    .el-dialog,
    .el-pager li {
      background: unset;
    }
  }
}
</style>
<style lang="stylus" scoped>
.firePanel {
  height: vh(484);
  display: flex;
  flex-direction: column;
  position: relative;
  .cover {
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.5);
    position: absolute;
    top: 0;
    left: 0;
  }
  .condition {
    .second,
    .third {
    //   display: flex;
    //   justify-content: space-between;
    //   align-items: center;
      span {
        margin-right: 5px;
        font-size: 14px;
      }
      .dateBtn {
        font-size: 12px;
        width: 54px;
        height: 30px;
        border: 1px solid #17d0ff;
        border-radius: 3px;
        text-align-last: center;
        line-height: 30px;
        cursor: pointer;
        float:right;
      }
    }
  }
  .refresh {
    position: absolute;
    right: 0;
    top: 9px;
    cursor: pointer;
  }
}
</style>